<template>
    <div class="user-table-container">
        <el-button size="mini" type="primary" @click="handleAdd()">
            新增
        </el-button>
        <!-- 移除 default-expand-all 属性 -->
        <el-table :data="menus" style="width: 100%;margin-bottom: 20px;" row-key="id" border 
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <el-table-column label="菜单编号"  sortable>
                <template #default="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column label="菜单名" >
                <template #default="scope">{{ scope.row.label }}</template>
            </el-table-column>
            <el-table-column label="url" >
                <template #default="scope">{{ scope.row.url }}</template>
            </el-table-column>
            <el-table-column label="操作" width="280">
                <template #default="scope">
                    <div class="flex justify-center space-x-1">
                        <el-button size="mini" type="primary" class="btn-edit smaller-btn"
                            @click="handleEditMenu(scope.$index, scope.row)">
                            <i class="el-icon-edit"></i> <span class="btn-text">编辑</span>
                        </el-button>
                        <el-button size="mini" type="danger" class="btn-delete smaller-btn"
                            @click="handleDeleteMenu(scope.$index, scope.row)">
                            <i class="el-icon-delete"></i> <span class="btn-text">删除</span>
                        </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <Menuaddedit ref="menuaddedit" :addVisible="addVisible" :title="title" @closeDialog="closeDialog"></Menuaddedit>
    </div>
</template>

<script>
import { menusApi, delMenuApi, treeMenuApi } from '@/api/MenuApi';
import Menuaddedit from '@/components/menu/Menuaddedit.vue';

export default {
    data() {
        return {
            menus: [],
            addVisible: false,
            title: ''
        };
    },
    components: {
        Menuaddedit
    },
    mounted() {
        this.loadMenuS();
    },
    methods: {
        async loadMenuS() {
            try {
                const res = await treeMenuApi();
                if (res.status === 200) {
                    this.menus = res.data;
                } else {
                    this.$message.error(res.msg);
                }
            } catch (error) {
                console.error('加载菜单列表失败:', error);
                this.$message.error('网络错误，请稍后重试');
            }
        },

        // 操作方法
        closeDialog(isReflush = false) {
            this.addVisible = false;
            isReflush && this.loadMenuS();
        },
        handleAdd() {
            this.addVisible = true;
            this.title = '新增角色';
            this.$refs.menuaddedit.openDialog();
        },
        handleEditMenu(index, row) {
            console.log('编辑角色:', row);
            this.addVisible = true;
            this.title = '编辑角色';
            this.$refs.menuaddedit.openDialog(row.id);
        },
        handleDeleteMenu(index, row) {
            this.$confirm('确定要删除此用户吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                try {
                    const res = await delMenuApi(row.id);
                    if (res.status === 200) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    } else {
                        this.$message.error(res.msg);
                    }
                } catch (error) {
                    console.error('删除用户失败:', error);
                    this.$message.error('网络错误，请稍后重试');
                }
                this.loadMenuS(); // 刷新数据
            }).catch(() => {
                // 取消操作
            });
        }
    }
};
</script>

<style scoped lang="less">
.user-table-container {
    // 表格容器样式

    .pagination-container {
        // 分页容器样式
        padding: 10px;
        background-color: #f5f7fa;
        border-radius: 0 0 4px 4px;
    }

    // 优化表格样式
    .el-table {
        &__header th {
            background-color: #f5f7fa;
            color: #606266;
            font-weight: 600;
        }

        &__row {
            transition: all 0.2s ease;

            &:hover {
                background-color: #fafbfc !important;
            }
        }

        // 隐藏水平滚动条
        &__body-wrapper {
            overflow-x: hidden;
        }
    }

    // 按钮样式优化
    .btn-edit {
        &:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
        }
    }

    .btn-delete {
        &:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
        }
    }

    // 按钮组样式
    .flex {
        display: flex;
    }

    .justify-center {
        justify-content: center;
    }

    .space-x-1 {
        gap: 4px;
    }

    // 新增按钮变小样式
    .smaller-btn {
        padding: 2px 4px;
        font-size: 10px;
    }
}
</style>    